<template>
    <div>
        <a-form :form="form" @submit="onSubmit" :hideRequiredMark='true'>
            <a-row :gutter='10' class="form-main-content">
                <a-col :span="8" class="form-item">
                    <a-form-item label="产品名称">
                        <a-input placeholder="产品名称" v-decorator="[
                    'name',
                   {rules: [{ required: true, message: '请输入产品名称' }]}
                ]"/>
                    </a-form-item>
                </a-col>
                <a-col :span="8" class="form-item">
                    <a-form-item label="价格">
                        <a-input-number placeholder="价格" :min="0" :precision="2" v-decorator="['price']"/>
                    </a-form-item>
                </a-col>
                <a-col :span="8" class="form-item">
                    <a-form-item label="价格单位">
                        <a-input placeholder="价格单位" v-decorator="['unit']"/>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter='10' class="form-main-content">
                <a-col :span="8" class="form-item">
                    <a-form-item label="影像分辨率">
                        <a-input placeholder="影像分辨率" v-decorator="['resolution']"/>
                    </a-form-item>
                </a-col>
                <a-col :span="8" class="form-item">
                    <a-form-item label="交付时间">
                        <a-input placeholder="交付时间（10平方公里）(工作日)" v-decorator="['deliver']"/>
                    </a-form-item>
                </a-col>
                <a-col :span="8" class="form-item">
                    <a-form-item label="交付格式">
                        <a-input placeholder="交付格式" v-decorator="['deliver_type']"/>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter='10' class="form-main-content">
                <a-col :span="8" class="form-item">
                    <a-form-item label="服务要求">
                        <a-input placeholder="服务要求" v-decorator="['request']"/>
                    </a-form-item>
                </a-col>
                <a-col :span="8" class="form-item">
                    <a-form-item label="分类">
                        <a-select v-decorator="['cate_id',{rules: [{ required: true, message: '请选择分类' }]}
                    ]" placeholder="请选择分类">
                            <a-select-option v-for="v in cates" :key="v.id" :value="v.id">
                                {{v.name}}
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :span="8" class="form-item">
                    <a-form-item label="排序" >
                        <a-input-number placeholder="由大到小排序" :min="0"  v-decorator="['sort',{initialValue:10000}]"/>由大到小排序
                    </a-form-item>
                </a-col>
                <a-col :span="8" class="form-item">
                    <a-form-item label="产品类别" >
                        <a-select v-decorator="['type_id',{rules: [{ required: true, message: '请选择产品类别' }]}
                    ]" placeholder="请选择产品类别">
                            <a-select-option v-for="(item,index) in typeList" :key="index" :value="index" >
                                {{item}}
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :span="24" class="form-item">
                    <a-form-item label="图片">
                        <a-upload
                                name="image"
                                listType="picture-card"
                                class="avatar-uploader"
                                :showUploadList="false"
                                :customRequest="uploadFunc"
                                :beforeUpload="beforeUpload"
                                @change="handleChange"
                                v-decorator="['image']"
                        >
                            <img v-if="image_url" :src="image_url" style="width:128px;height:128px" alt="图片">
                            <div v-else>
                                <a-icon :type="loading ? 'loading' : 'plus'"/>
                            </div>
                        </a-upload>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter='10' class="form-main-content">
                <a-col :span="8" class="form-item">
                    <a-form-item label="状态">
                        <a-select v-decorator="['status', {initialValue: 1}]">
                            <a-select-option :value="1">
                                启用
                            </a-select-option>
                            <a-select-option :value="0">
                                禁止
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :span="8" class="form-item">
                    <a-form-item label="推荐">
                        <a-select v-decorator="['is_recommend', {initialValue: 0}]">
                            <a-select-option :value="1">
                                是
                            </a-select-option>
                            <a-select-option :value="0">
                                否
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :span="8" class="form-item">
                    <a-form-item label="是否紧急">
                        <a-select v-decorator="['is_urgent', {initialValue: 0}]">
                            <a-select-option :value="1">
                                是
                            </a-select-option>
                            <a-select-option :value="0">
                                否
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :span="24" class="form-item">
                    <a-form-item label="交付内容">
                        <vue-editor v-model="content"></vue-editor>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter='10' class="form-main-content">
                <a-col :span="24" class="form-item">
                    <a-form-item label="巡检说明">
                        <vue-editor v-model="inspect"></vue-editor>
                    </a-form-item>
                </a-col>
                <a-col :span="24" class="form-item">
                    <a-form-item label="详细说明">
                        <vue-editor v-model="detail"></vue-editor>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-form-item style="text-align: center">
                <a-button type="primary" html-type="submit">
                    提交
                </a-button>
            </a-form-item>
        </a-form>
    </div>
</template>

<script>
    import { VueEditor } from 'vue2-editor'

    import {getBase64} from "@/utils/ImageBase64";

    export default {
        components: {
            VueEditor
        },
        data() {
            return {
                cates: [],
                loading: false,
                image_url: "",
                id: 0,
                person: true,
                form: this.$form.createForm(this),
                labelCol: {lg: {span: 7}, sm: {span: 7}},
                wrapperCol: {lg: {span: 10}, sm: {span: 17}},
                uploadFunc: file => {
                    this.upload(file);
                },
                content: '',
                inspect: '',
                detail: '',
                typeList:[],
            };
        },

        methods: {
            onSubmit(form) {
                this.form.validateFields((err, values) => {
                    if (!err) {
                        values.image = this.image_url;

                        let obj = {
                            content: this.content,
                            inspect: this.inspect,
                            detail: this.detail,
                        };
                        values = {...values, ...obj};
                        this.postData(values).then(res => {
                            if (res.id) {
                                this.$message.success(res.msg, 1);
                                this.$router.push("/goods");
                            } else {
                                this.$message.error(res.msg, 1);
                            }
                        });
                    }
                })
            },
            async postData(param) {
                return await this.http("put", "goods/update?id=" + this.id, param);
            },
            async getDetail(id) {
                let data = await this.http("get", "goods/view", {id: id});
                this.content = data.content;
                this.inspect = data.inspect;
                this.detail = data.detail;
                return data;
            },
            beforeUpload(file) {
                const typeB = file.type == "image/jpeg" || file.type == "image/png";
                if (!typeB) {
                    this.$message.error("请选择jpg,png格式的图片");
                }
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$message.error("图片大小必须小于2MB!");
                }
                return typeB && isLt2M;
            },
            handleChange(info) {
                if (info.file.status === "uploading") {
                    this.loading = true;
                    return;
                }
                if (info.file.status === "done") {
                    this.loading = true;
                    this.upload(info);
                }
            },
            upload(file) {
                getBase64(file.file, base64 => {
                    this.http("post", "upload/upload", {image: base64}).then(res => {
                        this.image_url = res.imgurl;
                        this.loading = false;
                    });
                });
            },
        },
        mounted() {
            this.http("get",'/goods/types').then(res=>{
                this.typeList = res
            })
            this.http("get", "goodscate/index", {page_size: 100}).then(res => {
                this.cates = res.data;
            });
            this.id = this.$route.params.id;
            this.getDetail(this.id).then(res => {
                this.image_url = res.image
                res.cate_id = String(res.cate_id)
                this.form.setFieldsValue(res);
            });
        }
    };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .avatar-uploader > .ant-upload {
        width: 128px;
        height: 128px;
    }
</style>
